⚡ 30 秒速记

• 历史入口创建根并提交待渲染内容
• 根更新入队，调度器安排协调工作
• 渲染生成工作树，提交应用宿主变化
• 内部函数名与数据结构随版本变化
• React 19 客户端挂载使用 createRoot

ReactDOM.render 串起的是建立根、提交更新、计算界面和应用结果这条链。 在使用它的历史版本里，首次调用初始化根数据，后续调用复用根并更新内容，再进入相应调度与提交流程。内部源码函数帮助理解分工，但不适合当跨版本契约。React 19 已移除这个入口，新客户端挂载使用 createRoot，已有服务端标记则要考虑水合入口。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

从本讲开始，我们将以首次渲染为切入点，拆解 Fiber 架构下 ReactDOM.render 所触发的渲染链路，结合源码理解整个链路中所涉及的初始化、render 和 commit 等过程

一、ReactDOM.render 调用栈的逻辑分层

开篇先给到你一个简单的 React AppDemo：

import React from "react";
import ReactDOM from "react-dom";

function App() {
    return (
      <div className="App">
        <div className="container">
          <h1>我是标题</h1>
          <p>我是第一段话</p>
          <p>我是第二段话</p>
        </div>
      </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Demo 启动后，渲染出的界面如下图所示：

现在请你打开 Chrome 的 Performance 面板，点击下图红色圈圈所圈住的这个“记录”按钮：

然后重新访问 Demo 页面对应的本地服务地址，待页面刷新后，终止记录，便能够得到如下图右下角所示的这样一个调用栈大图：

放大该图，定位“src/index.js”这个文件路径，我们就可以找到 ReactDOM.render 方法对应的调用栈，如下图所示：

从图中你可以看到，ReactDOM.render 方法对应的调用栈非常深，中间涉及的函数量也比较大。如果这张图使你心里发虚，请先不要急于撤退——分析调用栈只是我们理解渲染链路的一个手段，我们的目的是借此提取关键逻辑，而非理解调用栈中的每一个方法。就这张图来说，你首先需要把握的，就是整个调用链路中所包含的三个阶段